<template>
  <view>
    <text class="u-font-sm pd_t_20 u-p-l-20 color-666"
          style="line-height: 40upx"
          :class="{'eclipse-6': eclipse == true}"
    >
      {{txt || ''}}
    </text>
    <view class="u-text-center u-m-b-20 font-28 color-666 show-more"
          @click="showMore"
          v-if="showOrNot">
      查看更多
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      txt: String
    },

    data() {
      return {
        showOrNot: false,
        eclipse: true
      }
    },

    methods: {
      showMore() {
        this.eclipse = false
        this.showOrNot = false
      }
    },

    mounted() {
      /*var _this = this
      this.$nextTick(() => {
        this.createSelectorQuery().select('.eclipse-6').boundingClientRect(function(rect) {
          var maxHeight = uni.upx2px(40) * 6 + uni.upx2px(10)
          console.log(rect.height)
          if (rect.height > maxHeight) {
            _this.showOrNot = true
          }
        }).exec()
      })*/
    },

    watch: {
      txt(newVal) {
        var _this = this
        if (newVal) {
          this.$nextTick(() => {
            this.createSelectorQuery().select('.eclipse-6').boundingClientRect(function(rect) {
              var maxHeight = uni.upx2px(40) * 6 + uni.upx2px(10)
              if (rect.height > maxHeight) {
                _this.showOrNot = true
              }
            }).exec()
          })
        }
      }
    }
  }
</script>

<style scoped>
  .show-more {
    border-top: 1px solid #f7f7f7;
  }
</style>
